import React, { Component } from 'react';
import Image from 'next/image';
import { Loader } from 'lucide-react';
import styles from './index.module.scss';
import { withConsumer } from '../../../context';
import classNames from 'classnames';
import { motion } from 'framer-motion';

@withConsumer
class Comp extends Component {
  state = {
    show: false,
    loading: true,
    length: 0,
    title: '',
    current: 1,
    imgUrl: '',
  };
  componentDidMount = async () => {
    const {
      value: { setController },
    } = this.props;
    setController('AIViewer', this);
  };
  render() {
    const { imgUrl, loading, show, title, length, current } = this.state;
    return (
      <div className={styles.cont}>
        {show && (
          <div className={classNames(styles.container, {
            [styles.hidden]: !show,
          })}>
            <div
              className={styles.imageBox}
              onClick={() => {
                console.log('点击');
              }}
            >
              <div>
                <Image
                  src={imgUrl}
                  width={60}
                  height={60}
                  className={styles.image}
                />
              </div>
            </div>
            <div className={styles.text}>
              {loading && (
                <span className={styles.IconLoading}>
                  <Loader className="animate-spin" size={14} />
                </span>
              )}
              <div className={styles.textBox}>{title}</div>
              <span className={styles.pageSize}>
                {current}/{length}
              </span>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default Comp;
